<template>
  <div class="passwordManagement p-[30px]">
    <div class="flex justify-between">
      <span class="font-bold">个人中心</span
      ><span class="name"
        ><van-icon
          name="location-o"
          class="mr-[5px]"
        />当前位置：账户安全-个人中心</span
      >
    </div>
    <el-divider />
    <div class="mt-[10px] flex justify-center">
      <el-form
        ref="ruleFormRef"
        style="width: 500px; text-align: center"
        :model="formData"
        label-width="auto"
        size="default"
      >
        <el-avatar
          :size="100"
          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
        />
        <el-form-item label="用户名：">
          <el-input v-model="formData.userName" disabled style="width: 300px" />
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="formData.name" disabled style="width: 300px" />
        </el-form-item>
        <el-form-item label="身份证号：">
          <el-input v-model="formData.idCard" disabled style="width: 300px" />
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio-group v-model="formData.sex" disabled>
            <el-radio value="0">男</el-radio>
            <el-radio value="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份：">
          <el-input v-model="formData.role" disabled style="width: 300px" />
        </el-form-item>
        <el-form-item label="Email：">
          <el-input v-model="formData.mail" disabled style="width: 300px" />
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="formData.phone" disabled style="width: 300px" />
          <el-button type="text" class="ml-[10px]" @click="handleView"
            >立即解绑</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const formData = ref<RuleForm>({
  userName: "admin",
  name: "超级管理员",
  idCard: "420115********6789",
  sex: "0",
  role: "教职工",
  mail: "admin*****@jhxy.edu.cn",
  phone: "187********56"
});
const handleView = () => {
  router.push("/safeCenter/accountSecurity/phone");
};
</script>

<style lang="scss" scoped>
.passwordManagement {
  height: 100%;
  background-color: var(--color-main-background-secondary);
  .name {
    color: var(--color-main-text);
  }
}
</style>
